<template>
  <el-dialog
    width="800px"
    :title="$t('序列号')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <!-- 分配列表 -->
    <el-radio-group v-model="isPage" @change="handleRadio" style="margin: 10px">
      <el-radio label="1">{{ $t('不分页') }}</el-radio>
      <el-radio label="2">{{ $t('分页') }}</el-radio>
    </el-radio-group>
    <div class="">
      <!-- 不分页列表 -->
      <v-list
        v-if="isPage == 1"
        @rowSelect="(rows) => (tableCheck = rows)"
        :list-data="tableData"
        :prop="[{ name: $t('序列号'), prop: 'skuSerializable', style: { flex: 1 } }]"
        :view-count="20">
      </v-list>
      <!-- 分页列表 -->
      <div v-if="isPage == 2" class="PagingList">
        <el-table
          height="526"
          @selection-change="(rows) => (tableCheck = rows)"
          ref="TableRef"
          :data="pageData">
          <el-table-column align="center" type="selection" width="48" />

          <!-- 序列号 -->
          <el-table-column align="center" prop="skuSerializable" :label="$t('序列号')" />
        </el-table>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page-sizes="[20, 30, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getPageList" />
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getSkuSerializableList,
  getSkuSerializableListByPage,
} from '@/api/distribution/sku/inventoryLocationlList'
import VList from '@/components/v-list/index.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['mianRef']?.doLayout())
  },
  components: { VList },

  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**是否分页 */
      isPage: '1',
      tableCheck: [],
      tableData: [],
      pageData: [],
      queryParams: {
        skuId: '',
        pageSize: 20,
        pageNum: 1,
      },
      form: {},
      // 表单校验
      rules: {
        distrName: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      // 遮罩层
      loading: true,
      total: 0,
      pageTotal: 0,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.isPage = '1'
        this.pageData = []
        this.queryParams.pageNum = 1
        this.getList()
      }
    },
  },
  methods: {
    /**查询分页分配列表 */
    getPageList() {
      const data = {
        ...this.queryParams,
        skuId: this.formData.skuId,
      }
      getSkuSerializableListByPage(data).then((res) => {
        const { rows, total } = res
        this.pageData = rows
        this.pageTotal = total
        this.loading = false
      })
    },
    handleRadio(value) {
      if (value == 1) {
        this.tableData = []
        this.getList()
      } else {
        this.pageData = []
        this.getPageList()
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 查询供应厂家列表 */
    getList() {
      getSkuSerializableList(this.formData.skuId).then((res) => {
        this.tableData = res.data.map((item, index) => {
          return {
            ...item,
            index,
            check: false,
          }
        })
        this.loading = false
      })
    },

    handleSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-table--medium .el-table__cell {
  padding: 0 !important;
  line-height: 25px;
  height: 25px !important;
}
</style>
